<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/layout/main.xhtml">

    <ui:define name="title">Home</ui:define>

    <ui:define name="content">

        <h1>Hello World!</h1>

        <p>Your CDI bean <code>HelloWorld</code> says <span
                style="color: blue;">#{helloWorld.text}</span> using the Unified EL.</p>

        <h:form id="bv">
            <h2>Bean Validation examples</h2>

            <p>Enforces annotation-based constraints defined on the model class.</p>
            <table>
                <tr>
                    <th style="text-align: right;">
                        <h:outputLabel for="letters" value="Letters:"/>
                    </th>
                    <td>
                        <h:inputText id="letters" value="#{helloWorld.letters}"/>
                        <h:message for="letters" errorClass="invalid"/>
                    </td>
                </tr>
                <tr>
                    <th style="text-align: right;">
                        <h:outputLabel for="numbers" value="Numbers:"/>
                    </th>
                    <td>
                        <h:inputText id="numbers" value="#{helloWorld.numbers}"/>
                        <h:message for="numbers" errorClass="invalid"/>
                    </td>
                </tr>
                <tr>
                    <th style="text-align: right;">
                        <h:outputLabel for="email" value="Email:"/>
                    </th>
                    <td>
                        <h:inputText id="email" value="#{helloWorld.email}"/>
                        <h:message for="email" errorClass="invalid"/>
                    </td>
                </tr>
            </table>
            <p>
                <h:commandButton id="check" action="check" value="Check values"/>
                <h:outputText value=" All clear!" rendered="#{facesContext.postback and empty facesContext.messageList}"
                              style="color: green;"/>
            </p>
        </h:form>

        <h2>Widgets</h2>
        <h:dataTable var="_widget" value="#{widgets}">
            <h:column>
                <f:facet name="header">Id</f:facet>
                #{_widget.id}
            </h:column>
            <h:column>
                <f:facet name="header">Part Number</f:facet>
                #{_widget.partNumber}
            </h:column>
            <h:column>
                <f:facet name="header">Name</f:facet>
                #{_widget.name}
            </h:column>
            <h:column>
                <f:facet name="header">Description</f:facet>
                #{_widget.description}
            </h:column>
        </h:dataTable>
    </ui:define>
</ui:composition>
